<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

        Vue.directive('red',function(){
            this.el.style.background='red';
        });

        Vue.directive('color',function(color){
            this.el.style.color= color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome',
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <p v-red>{{msg}}</p>
        <p v-color="'green'">{{msg}}</p>
        <p v-color="a">{{msg}}</p>
    </div>

</body>
</html>



















